<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Vue3之watch和computed |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Vue3之watch和computed</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-05 11:00:11</span>
        <span class="mobile">2023-06-05 11:00</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-05-11 19:14:56</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Vue3/">Vue3</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/Vue/">Vue</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/watch/">watch</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/computed/">computed</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.5k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>6 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://cn.bing.com/th?id=OHR.QuebecCityBridge_ZH-CN9618387961_1920x1080.webp&qlt=50" alt="bing.com-横跨圣劳伦斯河下游的魁北克大桥，加拿大" title="bing.com-横跨圣劳伦斯河下游的魁北克大桥，加拿大"><br>Vue3中计算属性与监听属性各自和含义、用法及区别。</p>
<span id="more"></span>

<h1 id="1-watch"><a href="#1-watch" class="headerlink" title="1.watch"></a>1.watch</h1><p>用于声明在数据更改时调用的侦听回调。也叫属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些操作。</p>
<ul>
<li>类型-源码解读</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">interface ComponentOptions &#123;</span><br><span class="line">  watch?: &#123;</span><br><span class="line">    [key: string]: WatchOptionItem | WatchOptionItem[]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">type WatchOptionItem = string | WatchCallback | ObjectWatchOptionItem</span><br><span class="line"></span><br><span class="line">type WatchCallback&lt;T&gt; = (</span><br><span class="line">  value: T,</span><br><span class="line">  oldValue: T,</span><br><span class="line">  onCleanup: (cleanupFn: () =&gt; void) =&gt; void</span><br><span class="line">) =&gt; void</span><br><span class="line"></span><br><span class="line">type ObjectWatchOptionItem = &#123;</span><br><span class="line">  handler: WatchCallback | string</span><br><span class="line">  immediate?: boolean // default: false</span><br><span class="line">  deep?: boolean // default: false</span><br><span class="line">  flush?: &#x27;pre&#x27; | &#x27;post&#x27; | &#x27;sync&#x27; // default: &#x27;pre&#x27;</span><br><span class="line">  onTrack?: (event: DebuggerEvent) =&gt; void</span><br><span class="line">  onTrigger?: (event: DebuggerEvent) =&gt; void</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>watch</code>选项期望接受一个<strong>对象</strong>，其中<strong>键是需要侦听的响应式组件实例属性</strong> (例如，通过 data 或 computed 声明的属性)，<strong>值是相应的回调函数</strong>。该回调函数接受被侦听源的新值和旧值。</p>
<p>除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如 a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的<mark>$watch()</mark>API。</p>
<p>值也可以是一个方法名称的字符串(通过<code>methods</code>声明)，或包含额外选项的对象。当使用对象语法时，回调函数应被声明在<code>handler</code>中。额外的选项包含：</p>
<ul>
<li><p>immediate：在侦听器创建时立即触发回调。第一次调用时，旧值将为undefined。</p>
</li>
<li><p>deep：如果源是对象或数组，则<strong>强制深度遍历源</strong>，以便在深度变更时触发回调。详见<mark><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers" >深层侦听器<i class="fas fa-external-link-alt"></i></a></mark>。</p>
</li>
<li><p>flush：调整回调的刷新时机。详见<mark><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing" >回调的触发时机<i class="fas fa-external-link-alt"></i></a>及<a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/api/reactivity-core.html#watcheffect" >watchEffect<i class="fas fa-external-link-alt"></i></a></mark>。</p>
</li>
<li><p>onTrack &#x2F; onTrigger：调试侦听器的依赖关系。详见<mark><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/extras/reactivity-in-depth.html#watcher-debugging" >侦听器调试<i class="fas fa-external-link-alt"></i></a></mark>。</p>
</li>
</ul>
<p>声明侦听器回调时<strong>避免使用箭头函数</strong>，因为它们将无法通过this访问组件实例。</p>
<p>watch可以接收三个参数：监听源、回调函数cb（newVal,oldVal），options配置项(<br>    {<br>        deep:true&#x2F;&#x2F;是否开启深度监听<br>        immediate:true&#x2F;&#x2F;是否立即调用一次<br>    }<br>)</p>
<blockquote>
<p>示例：</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">let count = ref(1);</span><br><span class="line">let message = ref(&#x27;你好&#x27;);</span><br><span class="line">let worker = reactive(&#123;</span><br><span class="line">    name: &#x27;小二&#x27;,</span><br><span class="line">    salary: &#x27;10K&#x27;,</span><br><span class="line">    job: &#123;</span><br><span class="line">           job1 : &#123;</span><br><span class="line">              positon: &#x27;普通职员&#x27;</span><br><span class="line">           &#125; </span><br><span class="line">         &#125;</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>

<p>(1)监听ref创建的单个响应式数据</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">watch(count, (newValue, oldValue) =&gt; &#123;</span><br><span class="line">      console.log(&#x27;count变化了&#x27;, newValue, oldValue);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>(2)监听ref创建的多个响应式数据,newValue和oldValue也是Array</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">watch([count, message], (newValue, oldValue) =&gt; &#123;</span><br><span class="line">    console.log(&#x27;count或message变化了&#x27;, newValue, oldValue)</span><br><span class="line">&#125;,&#123;immediate: true, deep: true&#125;)</span><br></pre></td></tr></table></figure>

<p>(3)监听reactive创建的响应式数据的全部属性<br><strong>注意：<br>1、无法正确获取到oldVal<br>2、强制开启深度监听</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">watch(worker, (newValue, oldValue) =&gt; &#123;</span><br><span class="line">    console.log(&#x27;worker变化了&#x27;, newValue, oldValue)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>(4)监听reactive创建的响应式数据的单个属性</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">watch(</span><br><span class="line">   () =&gt; worker.name,</span><br><span class="line">   (newValue, oldValue) =&gt; &#123;</span><br><span class="line">       console.log(&#x27;worker中的name属性发生变化了&#x27;, newValue, oldValue)</span><br><span class="line">    &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<ul>
<li>特殊情况</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">watch(worker.job, (newValue, oldValue) =&gt; &#123;</span><br><span class="line">   console.log(&#x27;worker中的job属性发生变化了&#x27;, newValue, oldValue)</span><br><span class="line">&#125;,&#123;deep: true&#125;)</span><br></pre></td></tr></table></figure>

<p>(5)监听reactive创建的响应式数据的多个属性</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">watch(</span><br><span class="line">    [</span><br><span class="line">       () =&gt; worker.name,</span><br><span class="line">       () =&gt; worker.salary,</span><br><span class="line">    ],</span><br><span class="line">    (newValue, oldValue) =&gt; &#123;</span><br><span class="line">       console.log(&#x27;worker中的name或者salary属性发生变化了&#x27;, newValue, oldValue)</span><br><span class="line">    &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<p>详见<mark><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/essentials/watchers.html" >侦听器<i class="fas fa-external-link-alt"></i></a></mark></p>
<hr>
<h1 id="2-computed"><a href="#2-computed" class="headerlink" title="2.computed"></a>2.computed</h1><p>用于声明要在组件实例上暴露的计算属性。在computed中定义的计算属性，都<strong>会被缓存起来</strong>，当计算属性里面依赖的一个或多个<strong>属性变化</strong>，则<strong>会重新计算</strong>当前计算属性的值；如果依赖的属性没有发生变化，则<strong>会从缓存中读取</strong>。</p>
<ul>
<li>类型-源码解读</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">interface ComponentOptions &#123;</span><br><span class="line">  computed?: &#123;</span><br><span class="line">    [key: string]: ComputedGetter&lt;any&gt; | WritableComputedOptions&lt;any&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">type ComputedGetter&lt;T&gt; = (</span><br><span class="line">  this: ComponentPublicInstance,</span><br><span class="line">  vm: ComponentPublicInstance</span><br><span class="line">) =&gt; T</span><br><span class="line"></span><br><span class="line">type ComputedSetter&lt;T&gt; = (</span><br><span class="line">  this: ComponentPublicInstance,</span><br><span class="line">  value: T</span><br><span class="line">) =&gt; void</span><br><span class="line"></span><br><span class="line">type WritableComputedOptions&lt;T&gt; = &#123;</span><br><span class="line">  get: ComputedGetter&lt;T&gt;</span><br><span class="line">  set: ComputedSetter&lt;T&gt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>该选项接收一个对象，其中键是计算属性的名称，值是一个计算属性 getter，或一个具有 get 和 set 方法的对象 (用于声明可写的计算属性)。</p>
<p>所有的 getters 和 setters 会将它们的 this 上下文自动绑定为组件实例。</p>
<p>注意，如果你为一个计算属性使用了箭头函数，则 this 不会指向该组件实例，不过你仍然可以通过该函数的第一个参数来访问实例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">export default &#123;</span><br><span class="line">  computed: &#123;</span><br><span class="line">    aDouble: (vm) =&gt; vm.a * 2</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="1-接受一个getter函数，根据getter的返回值返回一个不可变的响应式ref对象"><a href="#1-接受一个getter函数，根据getter的返回值返回一个不可变的响应式ref对象" class="headerlink" title="(1)接受一个getter函数，根据getter的返回值返回一个不可变的响应式ref对象"></a>(1)接受一个getter函数，根据getter的返回值返回一个不可变的响应式ref对象</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const count = ref(1)</span><br><span class="line">// 创建一个只读性计算属性，依赖于count值</span><br><span class="line">const plusOne = computed(() =&gt; count.value + 1)</span><br><span class="line">console.log(plusOne.value) // 2</span><br><span class="line">plusOne.value++ // error 该计算属性为只读属性，不可写</span><br></pre></td></tr></table></figure>

<h3 id="2-接受一个包含get和set函数的对象，用来创建一个可写的ref对象"><a href="#2-接受一个包含get和set函数的对象，用来创建一个可写的ref对象" class="headerlink" title="(2).接受一个包含get和set函数的对象，用来创建一个可写的ref对象"></a>(2).接受一个包含get和set函数的对象，用来创建一个可写的ref对象</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">const count = ref(1)</span><br><span class="line">// 创建一个可读写计算属性</span><br><span class="line">const plusOne = computed(&#123;</span><br><span class="line">  get: () =&gt; count.value + 1,</span><br><span class="line">  set: (val) =&gt; &#123;</span><br><span class="line">    count.value = val - 1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line">plusOne.value = 1</span><br><span class="line">console.log(count.value) // 0</span><br></pre></td></tr></table></figure>

<p>详见<a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/essentials/watchers.html" >vue.js官网 ： 计算属性<i class="fas fa-external-link-alt"></i></a><br><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/typescript/options-api.html#typing-computed-properties" >vue.js官网 ： typescript 与选项式API<i class="fas fa-external-link-alt"></i></a></p>
<hr>
<h1 id="3-watch和computed的区别"><a href="#3-watch和computed的区别" class="headerlink" title="3.watch和computed的区别"></a>3.watch和computed的区别</h1><ul>
<li><p>功能：computed是计算属性，watch是监听一个值的变化而执行对应的回调。</p>
</li>
<li><p>是否调用缓存： computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调。</p>
</li>
<li><p>是否调用return： computed必须有；watch可以没有。</p>
</li>
<li><p>使用场景： computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框。</p>
</li>
<li><p>是否支持异步： computed函数不能有异步；watch可以。</p>
</li>
</ul>
<hr>
<p><em><strong>本文参考文献：</strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/api/options-state.html#computed" >Vue.js官方文档 ： 状态选项<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_47594808/article/details/126087421?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-126087421-blog-123460538.235%5Ev32%5Epc_relevant_yljh&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-126087421-blog-123460538.235%5Ev32%5Epc_relevant_yljh&utm_relevant_index=6" >CSDN ： vue3中的computed与watch<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://www.cnblogs.com/yingliyu/p/14271931.html" >CNBlogs ： Vue3的新特性(三)：setup()、computed()和watch()<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/7200935040561578041" >掘金 ： Vue3中computed和watch的区别<i class="fas fa-external-link-alt"></i></a></strong></em></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/watch/">#watch</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/computed/">#computed</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/06/05/Vue3%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">Vue3之生命周期钩子</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/06/05/Vue3%E4%B9%8Bref%E4%B8%8Ereactive/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Vue3之ref与reactive</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
